<template>
  <div class="license-plate-display" :class="['license-plate', { 'new-energy': newEnergy }, size]">
    <div class="plate-frame">
      <!-- 省份简称 -->
      <div class="province-char">{{ plateNumber?.charAt(0) || '省' }}</div>

      <!-- 分隔符 -->
      <div class="separator"> * </div>

      <!-- 字母和数字 -->
      <div class="plate-chars">
        <div v-for="(char, index) in plateNumber?.slice(1)" :key="index">
          {{ char || '_' }}
        </div>
        <!-- 新能源车牌额外字符 -->
        <div v-if="newEnergy && plateNumber.length < 8" class="placeholder">_</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
interface Props {
  size?: 'normal' | 'small' | 'large'
}
const props = defineProps<{
  plateNumber: string
  newEnergy: boolean
  size: 'normal' | 'small' | 'large'
}>()
</script>

<style lang="scss" scoped>
.license-plate {
  &--small {
    font-size: 12px;
    padding: 4px 8px;
    /* 其他小尺寸样式 */
  }

  &--normal {
    font-size: 14px;
    padding: 6px 12px;
  }

  &--large {
    font-size: 16px;
    padding: 8px 16px;
  }
}

.license-plate-display {
  display: inline-block;
  font-family: 'SimHei', '黑体', sans-serif;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(144 144 144 / 50%);
  transition: transform 0.2s, box-shadow 0.2s;
}

.license-plate-display:hover {
  transform: translateY(1px);
  box-shadow: 0 0px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.plate-frame {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 2px 12px;
  border: 2px solid #0070C0;
  border-radius: 4px;
}

.province-char {
  font-size: 24px;
  font-weight: bold;
  padding: 4px 8px;
  background-color: #f5f5f5;
  border-radius: 2px;
  min-width: 28px;
  text-align: center;
}

.separator {
  font-size: 8px;
  padding: 0 4px;
  color: #333;
}

.plate-chars {
  display: flex;
  gap: 2px;
}

.plate-chars>div {
  font-size: 24px;
  font-weight: bold;
  min-width: 22px;
  text-align: center;
  padding: 4px 2px;
}

.new-energy {
  border-color: #339933;
}

.new-energy .plate-frame {
  border-color: #339933;
}

.placeholder {
  color: #aaa;
}

/* 尺寸变化 */
.license-plate-display.small .province-char,
.license-plate-display.small .plate-chars>div {
  font-size: 12px;
  padding: 2px 0px;
  min-width: 12px;
  line-height: 1;
}

.license-plate-display.small .plate-frame .separator {
  font-size: 5px;
}

.license-plate-display.large .province-char,
.license-plate-display.large .plate-frame .separator,
.license-plate-display.large .plate-chars>div {
  font-size: 18px;
}
</style>
